<template>
  <div>
    <div >
      <span class="spanClass">
        年份：
        <el-date-picker v-model="years" type="year" value-format="yyyy" :clearable="false" placeholder="选择年"
          @change="changeYear"></el-date-picker>
      </span>
      <span class="spanClass">
        时间段：
        <el-select v-model="period" placeholder="请选择" @change="chengeWeek" style="width:220px;">
          <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
        </el-select>
      </span>
      <span class="spanClass">
        职能组:
        <el-select v-model="fid" placeholder="请选择" @change="chengeGroup">
          <el-option v-for="item in groupsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </span>
    </div>
    <div class="weekList" v-for="(item, index) in dataOption" :key="index">
      <el-alert :title="item.name" type="success" :closable="false"></el-alert>
      <el-table border tooltip-effect="dark" :header-cell-style="{ background: '#F9F9F9' }" :data="item.list"
        v-loading="tableLoading" style="width: 100%;">
        <el-table-column prop="pid" align="center" label="ID" min-width="1"></el-table-column>
        <el-table-column prop="projectName" align="center" label="项目名称" min-width="3"></el-table-column>
        <el-table-column prop="sumTime" align="center" label="工时数（天）" min-width="2"></el-table-column>
        <el-table-column align="center" label="操作" min-width="2">
          <template slot-scope="scope">
            <el-button type="success" plain size="mini" @click="lookInfo(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="noneReac" v-if="dataOption.length == 0">--暂无周报记录--</div>

    <!-- 查看工时信息 -->
    <el-dialog title="查看工时信息" :visible.sync="dialogStation" width="1300px" center>
      <el-table border tooltip-effect="dark" :header-cell-style="{ background: '#F9F9F9' }" :data="tableData"
        v-loading="tableLoading" style="width: 100%;">
        <el-table-column prop="id" align="center" label="日报ID"></el-table-column>
        <el-table-column prop="taskDate" align="center" label="日期"></el-table-column>
        <el-table-column prop="projectName" align="center" label="项目名"></el-table-column>
        <el-table-column prop="time" align="center" label="工时数（天）"></el-table-column>
        <el-table-column prop="content" align="left" width="400" label="工作内容"></el-table-column>
        <el-table-column prop="achievement" align="center" label="业绩属性">
          <template slot-scope="scope">
            <span v-for="(i, j) in scope.row.achievement" :key="j" v-if="i.value">
              {{ i.name }}:
              <span>{{ i.value }}</span>个
              <br />
            </span>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="createTime" align="center" label="提交时间">
        </el-table-column>-->

        <el-table-column value-format="yyyy-MM-dd" prop="createTime" align="center" label="提交时间">
          <template slot-scope="scope">{{ scope.row.createTime | dateFormat }}</template>
        </el-table-column>
        <el-table-column prop="isConfirm" align="center" label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.isConfirm == 1">已确认</span>
            <span v-else>未确认</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import {
  weekReportList,
  periodWeekList,
  yearPeriodList,
  selectFunctionGroupList,
  userWeeklyList,
} from "@/service/Api.js"; //接口
export default {
  components: {},
  name: "weekly",
  data() {
    return {
      options: [],
      period: "",
      years: "",
      groupsList: "",
      fid: "",
      tableLoading: false,
      dataOption: [],
      tableData: [],
      dialogStation: false,
      form: {
        year: "",
        options:[],
      }
    };
  },
  created() {
    this.getdatetime();
    this.weekDate();
    this.groups();
  },
  methods: {
    //查看工时信息
    lookInfo(row) {
      this.dialogStation = true;
      let data = {
        // fid: this.fid,
        uid: row.uid,
        projectId: row.pid,
        period: this.period,
      };
      userWeeklyList(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data;
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].achievement = JSON.parse(
              this.tableData[i].achievement
            );
          }
        }
      });
    },
    handleCommon(name, row, idx) {
      if (this[name]) {
        this[name](row, idx);
      }
    },
    groups() {
      let userInfo = sessionStorage.getItem("userInfo");
      let id = JSON.parse(userInfo).id;
      selectFunctionGroupList(id).then((res) => {
        if (res.code == 0) {
          this.groupsList = res.data;
          let f;
          let arr = [];
          res.data.forEach(item => {
            arr.push(item.id);
            f = arr.join(",")
          })
          let list = [
            {
              id: f,
              name: "所有职能组",
            },
          ];
          list.push(...res.data);
          this.groupsList = list;
          this.fid = f;
          this.dataList(this.fid);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getdatetime() {
      let date = new Date();
      let year = date.getFullYear() + "";
      this.years = year;
    },
    changeYear() {
      // yearPeriodList(this.years).then((res) => {
      //   if (res.code == 0) {
      //     this.options = res.data;
      //     // console.log(this.options);
      //   }
      // });
      this.weekDate();
    },
    chengeGroup() {
      this.dataList();
    },
    //时间段
    weekDate() {
      yearPeriodList(this.years).then((res) => {
        if (res.code == 0) {
          this.options = res.data;
          this.period = res.data[0];
          // console.log(res.data);
          this.dataList();
        }
      });
    },
    chengeWeek(val) {
      this.dataList();
    },
    dataList() {
      let data = {
        period: this.period,
        fids: this.fid,
      };
      weekReportList(data).then((res) => {
        if (res.code == 0) {
          this.dataOption = res.data;
          // console.log(this.dataOption, 456);
        }
      });
    },
  },
};
</script>

<style scoped>
/* .condition {
  display: flex;
  justify-content: space-between;
} */

.weekList {
  margin-top: 10px;
}

.noneReac {
  text-align: center;
  padding: 20px;
  color: #ccc;
}

.spanClass {
  margin-left: 10px;
}
</style>
